<template>
    <div class="success-alert">
        <module-bord v-if="true" @closeModule="$emit('closeModule')">
            <div>
                <div class="text-center success-wimg">
                    <img class="success-img" :src="staticImageUrl('images/appraise/appraise_success.png')" alt="">
                </div>
                <div>
                    <p class="success-text text-center">{{appraiseSuccess.title}}</p>
                    <p class="success-description text-center" v-if="Number(appraiseSuccess.averageValue) > Number(appraiseSuccess.appraiseValue)">你的估价比当前平均价低了{{appraiseSuccess.averageValue - appraiseSuccess.appraiseValue}}元</p>
                    <p class="success-description text-center" v-else-if="Number(appraiseSuccess.averageValue) == appraiseSuccess.appraiseValue">你的估价跟当前平均价很接近哦</p>
                    <p class="success-description text-center" v-else-if="Number(appraiseSuccess.averageValue) < Number(appraiseSuccess.appraiseValue)">你的估价比当前平均价高了{{appraiseSuccess.appraiseValue - appraiseSuccess.averageValue}}元</p>
                </div>
                <div class="input-box displayFlex flexCenter activity-remind-btn">
                    <span @click="$emit('showShare')">分享再估一次</span>
                </div>
                <p class="text-center bottom-text">估价越接近拿大奖机率越高哦～</p>
            </div>
        </module-bord>
    </div>
</template>

<script>
    export default {
        name: "SuccessAlert",
        props:{
            appraiseSuccessProp:Object,
        },
        data(){
            return{
                appraiseSuccess:{
                    title:'恭喜你！估价成功',//标题
                    averageValue:0,//平均值
                    appraiseValue:0,//估价值
                }
            }
        },
        mounted(){
            this.appraiseSuccess = Object.assign({},this.appraiseSuccess,this.appraiseSuccessProp);
        },
        components:{
            'module-bord': () => import('../../../../components/commonComponents/alert/ModuleBord'),
        },
        watch:{
            appraiseSuccessProp(val){
                this.appraiseSuccess = Object.assign({},this.appraiseSuccess,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .success-alert /deep/{
        .module-bord-content{
            width: 3rem;
            padding: .3rem .2rem .2rem;
        }
    }
    .success-wimg{
        margin-bottom: .18rem;
    }
    .success-img{
        height: 1.08rem;
    }
    .success-text{
        font-size: .24rem;
        color: #313233;
    }
    .input-box{
        background-color: #fff;
        border-radius:.25rem;
        box-sizing: border-box;
        padding: .05rem .07rem .05rem .15rem;
        height: .4rem;
        margin-top: .1rem;
    }
    .success-description{
        font-size: .13rem;
        color: #939599;
    }
    .activity-remind-btn{
        background-color: #FDD909;
        color: #fff;
        font-size: .16rem;
        margin-top: .78rem;
    }
    .success-description{
        padding-top: .1rem;
    }
    .bottom-text{
        padding-top: .1rem;
        font-size: .13rem;
        color: #C4C6CC;
    }
</style>